<template>
    <div id="centertop" style="width: 100%; height: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
import china from '@/assets/china.json'
export default {
    name: 'Head',
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('centertop'));
        // 指定图表的配置项和数据（这里仅是示例，你需要根据实际需求来调整）
        let option = {
            // 添加标题
            title: {
                //text: '中国地图地图',
                left: '20%'
            },
            // 鼠标悬停时的提示框
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>诗人在此作的古诗数目为：' // 格式化提示框内容，{b}代表省份名称，{c}代表数值
            },
            // 工具栏
            // 视觉映射组件
             visualMap: {
                right: 10, // 将其调整为10px
                left: '80%', // 将其放置在右侧，并稍微向左移动一些空间
                top: 'bottom', // 保持顶部对齐
                min: 0, // 最小值保持为0
                max: 1000, // 最大值保持为1000
                text: ['高', '低'], // 文本保持不变
                calculable: true // 可计算选项保持为true
            },
            // 地图系列
            series: [
                {
                    name: '中国地图地图',
                    type: 'map',
                    map: 'china', // 使用的地图数据
                    roam: true, // 开启拖拽和缩放
                    label: {
                        show: false,
                        formatter: '{b}' // 格式化提示框内容，{b}代表省份名称，{c}代表数值
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        areaColor: '#cde' // 这里是地图区域的基础颜色
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    },
                    visualMap: {
                        min: 0, // 最小值保持为0
                        max: 1000, // 最大值保持为1000
                        text: ['高', '低'], // 文本保持不变
                        calculable: true, // 可计算选项保持为true
                        // 定义视觉映射的颜色
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
                        // 创建一个自定义的悬浮提示框
                        tooltip: {
                            formatter: function (params) {
                                // 如果params.value不为空，则说明是地图上的点
                                if (params.value) {
                                    return params.name + '<br/>' + params.seriesName + ': ' + params.value;
                                } else {
                                    // 否则，是视觉映射的悬浮提示
                                    return params.name + '<br/>' + params.seriesName + ': ' + params.value[1];
                                }
                            },
                            position: function (pos, params, el, elRect, size) {
                                // 调整提示框的位置，使其不会覆盖视觉映射组件
                                let x = pos[0];
                                let y = pos[1];
                                if (params.name === 'visualMap') {
                                    x = x - elRect.width / 2;
                                    y = y - elRect.height;
                                }
                                return [x, y];
                            }
                        }
                    }
                }
            ]
            
        };

        // 使用刚指定的配置项和数据显示图表。
        echarts.registerMap('china', china);
        myChart.setOption(option);
    },
};

</script>

<style>
#centertop {
    width: 100%;
    height: 100%;
}
</style>

